let map = echarts.init(document.getElementById('cmap'));//初始化
let option_map;
var pname = 'p'
option_map = {
    title: {
        text: 'COVID19 中国疫情地图',
        subtext: "",
        left: 'center',
        subtextStyle: {
            fontSize: 15
        }
    },
    tooltip: {
        trigger: 'item',
         formatter:'{b}'+'<br/>'+'{a0}:{c0}'+'人'+'<br/>'+'点击可在右侧查看省内各市详情' //对悬浮框的字符串进行自定义
    },
    legend: {
        orient: 'vertical',
        left: 'left', //图例，位于左边
        selectedMode: 'single', //点击选择的模式，支持multiple和single
        data: ['累计确诊', '累计治愈', '累计死亡', '现存确诊', '无症状', '疑似']//对应series
    },
    visualMap: {//对应视觉颜色
        type: 'piecewise',
        pieces: [
            {min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28'},
            {min: 500, max: 999, label: '500-999人', color: '#4e160f'},
            {min: 100, max: 499, label: '100-499人', color: '#974236'},
            {min: 10, max: 99, label: '10-99人', color: '#ee7263'},
            {min: 1, max: 9, label: '1-9人', color: '#f5bba7'},
        ],
        color: ['#E0022B', '#E09107', '#A3E00B']
    },
    toolbox: {//工具箱，包含一些图标的可执行操作
        show: true,
        orient: 'vertical',
        left: '90%',
        top: 'center',
        itemGap: 15,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    roamController: {
        show: true,
        left: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series: [//图例对应的各个图表内容
        {
            name: '累计确诊',
            type: 'map',
            mapType: 'china',
            roam: false,
            selectedMode: 'single',
            label: {
                show: true,
                color: 'rgb(249, 249, 249)'
            },
            data: [{name:'山西',value:0}]
        },
        {
            name: '累计治愈',
            type: 'map',
            mapType: 'china',
            roam: false,
            selectedMode: 'single',
            label: {
                show: true,
                color: 'rgb(248, 248, 248)'
            },
            data: [{name:'山西',value:0}]
        },
        {
            name: '累计死亡',
            type: 'map',
            mapType: 'china',
            roam: false,
            selectedMode: 'single',
            label: {
                show: false,
                color: 'rgb(249, 249, 249)'
            },
            data: [{name:'山西',value:0}]
        },
        {
            name: '疑似',
            type: 'map',
            mapType: 'china',
            roam: false,
            selectedMode: 'single',
            label: {
                show: true,
                color: 'rgb(247, 247, 247)'
            },
            data: [{name:'山西',value:0}]
        },
        {
            name: '无症状',
            type: 'map',
            mapType: 'china',
            roam: false,//是否可缩放，拖动
            selectedMode: 'single',
            label: {
                show: true,
                color: 'rgb(246, 246, 246)'
            },
            data: [{name:'山西',value:0}]
        },
        {
            name: '现存确诊',
            type: 'map',
            mapType: 'china',
            roam: false,
            selectedMode: 'single',
            label: {
                show: true,
                color: 'rgb(243, 243, 243)'
            },
            data: [{name:'山西',value:0}]
        }
    ]
};

map.setOption(option_map);//用配置项配置（动词）echarts

function getProvinceToday() {
    map.showLoading();
    $.ajax({
        type: 'get',
        url: '/getProvinceDay',
        data: {},
        success: function (prodata) {
            map.hideLoading();
            option_map.series[0].data = prodata['pdata']['confirm'];
            option_map.series[1].data = prodata['pdata']['heal'];
            option_map.series[2].data = prodata['pdata']['dead'];
            option_map.series[3].data = prodata['pdata']['suspect'];
            option_map.series[4].data = prodata['pdata']['noInfect'];
            option_map.series[5].data = prodata['pdata']['nowconfirm'];
            map.setOption(option_map);//用配置项配置（动词）echarts
            //console.log(option.series[0].data);
        }, error: function () {
            console.log("这个接口挂了");
        }
    })
}

function getPredict(){//获取预测数据
    $.ajax({
        type: 'get',
        url: '/getPredictData',
        data: {},
        success: function (predata) {
            console.log("aaa");
            console.log(predata);
            option_map.title.subtext = "预计数据更新时间后一天国内确诊增加"+predata['data']+"人(预测数据最近更新时间"+predata['time']+")";
            map.setOption(option_map);
        }, error: function () {
            console.log("这个接口挂了");
        }
    })
}

map.on('click', function (params) {//此处写点击事件内容
    console.log(params['name']);
    pname = params['name'];
    getCityToday();
});//点击事件，此事件还可以用到柱状图等其他地图

window.onresize=function(){
   map.resize();
};

getPredict();
getProvinceToday();